<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      style="padding-left: 50px;padding-right: 50px;">
      <el-row>
        <span style="color: #333;
                font-weight: bold;
                font-size: 15px;">Set Mail Template</span>
      </el-row>
      <el-row>
        <p style="color: #000;font-weight: bold;margin-top: -15px;"></p>
        <el-col :span="24" style="margin-top: 10px;">
          <el-form-item label-width="0" label="" prop="content">
            <editor v-model="form.content" :min-height="392"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="display: flex;width: 100%;">
      <el-button type="primary" @click="submitForm" style="margin-left: 50px;">Save</el-button>
      <el-button @click="cancel" style="margin-left: 10px;">Cancel</el-button>
    </div>

  </div>
</template>

<script>
  import { listTem, getTem, delTem, addTem, updateTem } from "@/api/system/tem";
import { getToken } from "@/utils/auth";

export default {
  name: "templateA",
  data() {
    return {
      form: {
        id: null,
        userId: null,
        content: "",
      },
      // 表单校验
      rules: {
        content: [
          { required: true, message: "content is null", trigger: "blur" }
        ]
      }
    };
  },
  // 给Vue的实例注入数据，进行数据监听
  created() {
    this.getList();
  },
  methods: {
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.$modal.loading("loading...");
      listTem().then(response => {
        let temList = response.rows;
        if (temList != null && temList.length > 0) {
          this.form = temList[0];
        }
        this.$nextTick(() => {
          this.scrollToTop();
        })
        this.$modal.closeLoading();
      });
    },
    // 取消按钮
    cancel() {
      const obj = { path: "/mail", name: "Mail" };
      this.$tab.closePage(obj);
      setTimeout(()=> {
        const obj = { path: "/mail" };
        this.$tab.closeOpenPage(obj);
      }, 300);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTem(this.form).then(response => {
              this.$modal.msgSuccess("success");
              const obj = { path: "/mail", name: "Mail" };
              this.$tab.closePage(obj);
              setTimeout(()=> {
                const obj = { path: "/mail" };
                this.$tab.closeOpenPage(obj);
              }, 300);
            });
          } else {
            addTem(this.form).then(response => {
              this.$modal.msgSuccess("success");
              const obj = { path: "/mail", name: "Mail" };
              this.$tab.closePage(obj);
              setTimeout(()=> {
                const obj = { path: "/mail" };
                this.$tab.closeOpenPage(obj);
              }, 300);
            });
          }
        }
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
  .card3 {
    background-image: linear-gradient(to right, #000 35%, rgba(255,255,255,0) 0%); /* 35%设置虚线点x轴上的长度 */
    background-position: bottom; /* top配置上边框位置的虚线 */
    background-size: 10px 1px; /* 第一个参数设置虚线点的间距；第二个参数设置虚线点y轴上的长度 */
    background-repeat: repeat-x;
  }
  .ql-editor.ql-blank::before{
    content: "";
  }
</style>
